<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext['request'].contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<SCRIPT type="text/javascript" src="${ctx }/static/js/jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(function(){	
	$("input[type=button]").click(function(){
		var v = $("input[type=text]").val();
		if(v.trim().length == 0){
			return ;
		}
		window.location.href="s?q=" + v;
	});
})
</SCRIPT>
<STYLE type="text/css">
div {
}
BODY {
	margin: 0;
	padding: 0;
	FONT-FAMILY: '微软雅黑', '宋体';
}
a {
	TEXT-DECORATION: none;
	color: #506320;
}
a:HOVER {
	TEXT-DECORATION: underline;
	color: #8A9966;
}
.main{
	width: 1000px; 
	margin: 10px auto;
}
input[type=text] {
	width: 300px;
	border: 2px solid #B7D07A;
	padding: 10px;
	font-fize: 24px;
}
input[type=button] {
	border: 2px solid #B7D07A;
	padding: 9px;
	font-fize: 24px;
}
#content {
}
.item {
	float: left;
	width: 220px;
	height: 300px;
	margin: 20px;
	margin-left: 0px;
	margin-top: 30px;
}
.item .img_box {
	margin: 3px;
	width: 210px;
	height: 210px;
	border: 2px solid #B7D07A;
}
.item .img_box:hover {
	border: 2px solid green;
}
.title {
	height: 40px;
	margin: 3px;
	FONT-SIZE: 14px;
}
.price {
	BACKGROUND: url('${ctx}/static/image/taobao_icon.png') no-repeat scroll -5px -80px;
	FONT-WEIGHT: 900;
	color: #FF2900;
	padding-left: 15px;
}
.commission {
	BACKGROUND: url('${ctx}/static/image/taobao_icon.png') no-repeat scroll -5px -25px;
	FONT-WEIGHT: 900;
	color: #FF2900;
	padding-left: 15px;
} 
.rate {
	FONT-WEIGHT: 900;
	color: #FF2900;
}
.seller {
	FONT-SIZE: 13px;
	margin: 3px;
}
#page {
	margin-top: 20px;
}
#page a {
	border: 1px solid pink;
	padding: 5px;
	margin: 5px;
}
#page a:hover {
	background-color: #B9C2A3;
	color: #fff;
}
.H {
	FONT-WEIGHT: 900;
	color: red;
}
</STYLE>
</head>
<body>
	<div class="main">
		<input type="text" value="${q }" name="field"/><input type="button" value="搜索"/>
		<div id="content">
		<c:forEach items="${pager.content }" var="item">
			<div class="item">
				<!-- 图片 -->
				<a href="${item.clickUrl }" target="_blank"><img class="img_box" src="${item.picUrl }_210x210.jpg"/></a>
				<div class="title">
					<!-- 商品名 -->
					<a href="${item.clickUrl }" target="_blank">${item.title }</a>
				</div>
				<!-- 上面title过长的话会影响显示效果，所以把下面的div设置成#fff，如果有多余，则把他挡住，需要设置成relative，z-index大于上面div即可 -->
				<div style="FONT-SIZE: 12px; BACKGROUND-COLOR: #fff; POSITION: relative; z-index: 11;">
					<!-- 商品价格，佣金，比率 -->
					<span class="price">${item.price }</span>&nbsp;&nbsp;
					<span class="commission" title="返利${item.commission }元">${item.commission }</span>&nbsp;&nbsp;
					<span class="rate" title="佣金比率">${item.commissionRate / 100 }%</span>&nbsp;
					<a href="item/${item.numIid }" target="_blank">查看详情</a>
				</div>
				<div class="seller">
					<!-- 店铺，所在地 -->
					<a href="${item.shopClickUrl }" target="_blank">${item.nick }</a>[${item.itemLocation }]<br/>
					<img src="${ctx}/static/image/level/${item.sellerCreditScore }.gif"/>
				</div>
			</div>
		</c:forEach>
		<div style="CLEAR: both;"></div>
		</div>
		<div id="page">
			<a href="s?q=${q }&p=">首页</a>
			<c:forEach var="i" step="1" begin="2" end="${pager.num }">
				<a href="s?q=${q }&p=${i}">${i }</a>
			</c:forEach>
			<a href="s?q=${q }&p=${pager.num + 1}">下一页</a>
			<span> 共找到${pager.total }条记录</span>
		</div>
	</div>
	<br/>
</body>
</html>